<template>
  <div class="box">
    <div class="content">
      <img class="login-img images" src="../assets/login.jpg" alt="登录">
      <img class="register-img images" src="../assets/register.jpg" alt="注册">
      <div class="login-wrapper">
        <div class="top-tips">
          <div id="title"><p>&nbsp;您的专属职业规划咨询师</p></div>
          <br>
          <br>
          <br>
<!--          <span class="top-tips-span">注册</span>-->
          <el-tooltip class="item" effect="light" content="快去拥有自己的专属导师吧" placement="bottom-end">
            <el-button  style="text-align: center"><span class="top-tips-span">注册</span></el-button>
          </el-tooltip>
          <br>
          <br>
          <br>
        </div>
        <h1 class="h1-text" style="text-align: center" >登录</h1>
<!--        <div class="other-login">-->
<!--          <img src="../assets/QQ.png" alt="">-->
<!--          <span>使用QQ登录</span>-->
<!--        </div>-->
        <div class="login-form" style="text-align: center">
          <div class="user-form form-item">
            <div class="text-tips">
              <span >账号</span>

              <span id="false1">
                <br>

                账号不能为空
              </span>
            </div>
            <input id="loginUsername" type="text" v-model="username">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>密码</span>
<!--              <span class="forgot-password">忘记密码?</span>-->
              <span id="false2">
                <br>

                密码不能为空
              </span>
            </div>
            <input id="input2" type="password" v-model="password">
          </div>
          <button class="btn" @click="login">登录</button>
        </div>
        <div class="register-form">
          <div class="user-form form-item">
            <div class="text-tips">
              <span>账号</span>
            </div>
            <span id="false3">
                <br>

                账号不能为空
              </span>
            <span id="false7">
                <br>

                账号已被注册,请重新输入
              </span>
            <input id="input3" type="text" v-model="regusername">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>密码</span>
            </div>
            <span id="false4">
                <br>

                密码不能为空
              </span>
            <input id="input4"  type="password" v-model="regpassword">
          </div>
          <div class="password-form form-item">
            <div class="text-tips">
              <span>确认密码</span>
            </div>
            <span id="false6">
                <br>

                输入的密码不一致!请重新输入
              </span>
            <input id="input5" type="password" v-model="cregpassword">
          </div>
          <el-button class="btn" @click="reg"><p style="font-weight: normal">注册</p></el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import router from "@/router";
// import router from "@/router";
import bus from "../share/share"

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  data(){
    return{
      username:"" ,
      password:"",
      regusername:"",
      regpassword:"",
      cregpassword:"",
      tokenname:"",
      tokenvalue:"",
      stoken:""
    }
  },
  methods:{

    sentMsg(){
        bus.$emit('share',this.stoken)

     },

    login(){
      var false1 = document.querySelector("#false1");
      var false2 = document.querySelector("#false2");
      var input1 = document.querySelector("#loginUsername");
      var input2 = document.querySelector("#input2");

      let da = {name:this.username,password:this.password}
      axios({
        url:'http://172.18.113.11:8081/user/login',
        method: "post",
        data:da
      }).then(res=>{
        console.log(res.data.data.tokenValue)
        localStorage.setItem("token",res.data.data.tokenValue)
          this.$router.push('/index')
        // if(res.data.code==200) {
        //   localStorage.setItem(res.data.data.tokenvalue)
        //   this.$router.push('/Index')
        // } else if(res.data.code==400){
        //   this.$message.error('登陆失败 账号或密码错误!');
        // }
      })
    },
    reg(){
      let da = {resu:this.regusername,resp:this.regpassword,cresp:this.cregpassword};
      var false3 = document.querySelector("#false3");
      var false4 = document.querySelector("#false4");
      var false6 = document.querySelector("#false6");
      var false7 = document.querySelector("#false7");
      var input3 = document.querySelector("#false3");
      var input4 = document.querySelector("#false4");
      var input5 = document.querySelector("#false5");
      if(this.cregpassword != this.regpassword){
        this.$message.error('两次密码不一致!')
      }else {
        axios({
          url:'http://localhost:8081/front/register',
          method: "post",
          data:da
        }).then(res=>{
          // if (res.data.code==411){
          //   false3.style.display = 'block';
          //   false4.style.display = 'none';
          //   false6.style.display = 'none';
          //   false7.style.display = 'none';
          //
          //   input3.focus()
          // }else if(res.data.code==412){
          //   false3.style.display = 'none';
          //   false4.style.display = 'block';
          //   false6.style.display = 'none';
          //   false7.style.display = 'none';
          //
          //   input4.focus()
          // }else if(res.data.code==413){
          //   false3.style.display = 'none';
          //   false4.style.display = 'none';
          //   false6.style.display = 'block';
          //   false7.style.display = 'none';
          //
          //   input5.focus()
          // }else if(res.data.code==200){
          //   false3.style.display = 'none';
          //   false4.style.display = 'none';
          //   false6.style.display = 'none';
          //   false7.style.display = 'block';
          //
          //   input3.focus()
          // }else
          if(res.data.code==200){

            // false3.style.display = 'none';
            // false4.style.display = 'none';
            // false6.style.display = 'none';
            // false7.style.display = 'none';

            this.$alert('即将登录', '注册成功', {
              confirmButtonText: '确定',
              callback: action => {
                router.push('/oneSelf')
              }
            });
          }else {
            this.$message.error("账号已被注册!")
          }
        })
      }

    }
  }
}
let flag = 1;
window.onload=function (){
  document.querySelector('.top-tips-span').addEventListener('click', function () {
    if (flag) {

      document.querySelector('.content').classList.add("add-class-content");
      document.querySelector('.login-img').classList.add("add-class-login-img");
      document.querySelector('.register-img').classList.add("add-class-register-img");
      document.querySelector('.login-img').classList.remove("add-class-login-img-show");
      document.querySelector('.login-wrapper').style.height = '90vh';
      document.querySelector('.content').style.height = '90vh';
      document.querySelector('.login-form').style.display = 'none';
      document.querySelector('.register-form').style.display = 'block';
      document.querySelector('.top-tips-span').innerHTML = '登录';
      document.querySelector('.h1-text').innerHTML = '注册';
      flag = 0;
    }
    else {
      document.querySelector('.content').classList.remove("add-class-content");
      document.querySelector('.login-img').classList.remove("add-class-login-img");
      document.querySelector('.login-img').classList.add("add-class-login-img-show");
      document.querySelector('.register-img').classList.remove("add-class-register-img");
      document.querySelector('.login-wrapper').style.height = '80vh';
      document.querySelector('.content').style.height = '85vh';
      document.querySelector('.login-form').style.display = 'block';
      document.querySelector('.register-form').style.display = 'none';
      document.querySelector('.top-tips-span').innerHTML = '注册';
      document.querySelector('.h1-text').innerHTML = '登录';
      flag = 1;
    }
  })
}
</script>
<!--<script src="../js/login.js">-->

<!--</script>-->
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.item{
  height: 40px;
  width: 90px;
  float: right;
  /*font-size: 6px;*/
}
#title{
  width: 300px;
  height: 200px;
  position: absolute;
  left: 50%;
  margin-left: -150px;
  background-image: -webkit-linear-gradient(left,blue,#66ffff 10%,#cc00ff 20%,#CC00CC 30%, #CCCCFF 40%, #00FFFF 50%,#CCCCFF 60%,#CC00CC 70%,#CC00FF 80%,#66FFFF 90%,blue 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-background-size: 200% 100%;
  -webkit-animation: masked-animation 4s linear infinite;
  font-size: 25px;

}
.box {
  background-color: rgb(51, 32, 108);
  width: 100vw;
  height: 100vh;
}
.box .content {
  width: 90vw;
  height: 85vh;
  background-color: rgb(228, 218, 232);
  border-radius: 40px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: 1s;
}
.box .content .images {
  margin-left: -150px;
  margin-right: 100px;
  position: absolute;
  left: 15%;
}
.box .content .login-img {
  width: 45%;
  height: 90%;
  border-radius: 15%;
}
.box .content .register-img {
  width: 45%;
  opacity: 0;
  border-radius: 15%;
}
.box .content .login-wrapper {
  width: 30vw;
  height: 80vh;
  border-radius: 40px;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
  background: rgba(244, 240, 245, 0.6);
  padding: 60px;
  box-sizing: border-box;
  position: absolute;
  /*text-align: center;*/
  right: 10%;
  transition: 1s;
}
#false1{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false2{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false3{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false4{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false6{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
#false7{
  color: red;
  /*font-weight: bold;*/
  display: none;
}
.box .content .login-wrapper .top-tips span:nth-child(1) {
  font-size: 25px;
  font-weight: 600;
}
.box .content .login-wrapper .top-tips .top-tips-span {

  color: rgb(0, 255, 255);
  /*border-bottom: 1px solid rgb(79, 133, 226);*/
  /*float: right;*/
  line-height: 25px;
  cursor: pointer;
}
.box .content .login-wrapper h1 {
  font-size: 45px;
  margin: 20px 0;
}
.box .content .login-wrapper .other-login {
  width: 60%;
  height: 50px;
  border-radius: 10px;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: #fff;
  margin: 40px 0;
  background-color: rgb(79, 133, 226);
  padding-bottom: 2px;
  cursor: pointer;
}
.box .content .login-wrapper .other-login img {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}
.box .content .login-wrapper .other-login span {
  vertical-align: middle;
}
.box .content .login-wrapper .login-form,
.box .content .login-wrapper .register-form {
  text-align: center;
  width: 100%;
}
.box .content .login-wrapper .login-form .form-item .text-tips,
.box .content .login-wrapper .register-form .form-item .text-tips {
  color: rgb(123, 122, 123);
  margin: 5px;
}
.box .content .login-wrapper .login-form .form-item .text-tips .forgot-password,
.box .content .login-wrapper .register-form .form-item .text-tips .forgot-password {
  font-size: 15px;
  color: rgb(79, 133, 226);
  border-bottom: 1px solid rgb(79, 133, 226);
  float: right;
  line-height: 25px;
  cursor: pointer;
}
.box .content .login-wrapper .login-form .form-item input,
.box .content .login-wrapper .register-form .form-item input {
  width: 100%;
  height: 50px;
  margin: 5px 0;
  border-radius: 5px;
  border: 0;
  font-size: 17px;
  padding: 0 20px;
  box-sizing: border-box;
}
.box .content .login-wrapper .login-form .form-item input:focus,
.box .content .login-wrapper .register-form .form-item input:focus {
  outline: none;
  border: 1px solid rgb(79, 133, 226);
}
.box .content .login-wrapper .login-form .btn,
.box .content .login-wrapper .register-form .btn {
  width: 150px;
  height: 50px;
  margin: 20px 0;
  background-color: rgb(59, 58, 59);
  border: 0;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.box .content .login-wrapper .login-form {
  display: block;
}
.box .content .login-wrapper .register-form {
  display: none;
}

.add-class-content {
  background-color: rgb(156, 148, 208) !important;
  transition: 0.1s;
}

.add-class-login-img {
  -webkit-animation: disappear 0.3s forwards;
  animation: disappear 0.3s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.add-class-login-img-show {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
}

.add-class-register-img {
  -webkit-animation: appear 1s forwards;
  animation: appear 1s forwards;
  -webkit-animation-timing-function: ease;
  animation-timing-function: ease;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }
  to {
    border-radius: 0%;
    opacity: 1;
  }
}

@keyframes appear {
  from {
    border-radius: 15%;
    opacity: 0;
  }
  to {
    border-radius: 0%;
    opacity: 1;
  }
}
@-webkit-keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}/*# sourceMappingURL=style.css.map */
</style>
